<template>
    <div class="login-container">
      <el-card class="login-card">
        <h2>登录</h2>
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
          <el-tab-pane label="手机验证码登录" name="phone">
            <el-form ref="phoneForm" :model="phoneForm" :rules="rules" label-width="100px">
              <el-form-item label="手机号" prop="phone">
                <el-row>
                  <el-col  :span="14">
                    <el-input v-model="phone" placeholder="请输入手机号" />
                  </el-col>

                  <el-col :push="2":span="4">
                    <el-button type="text" @click="sendCode" :disabled="sendingCode">{{ sendingCode ? '发送中...' : '发送验证码' }}</el-button>
                  </el-col>
                </el-row>
               
              </el-form-item>
              
             
              <el-form-item label="验证码" prop="code">
                <el-input v-model="phoneForm.code" placeholder="请输入验证码"></el-input>
              </el-form-item>
              <el-form-item >
                <el-row>
                  <el-col :push="4":span="4">
                <el-button type="success" @click="loginWithPhone" >登录</el-button>
              </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="账号密码登录" name="account">
            <el-form ref="accountForm" :model="accountForm" :rules="rules" label-width="100px">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="accountForm.userPhone" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="accountForm.userPass" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-row>
                  <el-col :push="4":span="4">
                <el-button type="success" @click="loginWithAccount" style="text-align: center;">登录</el-button>
              </el-col>
            </el-row>
              </el-form-item>


            </el-form>
          </el-tab-pane>
          <el-tab-pane label="第三方登录" name="qq">
            <img src="../../static/image/qq1.jpg" style="width: 100px ; height: 100px;"  @click="show" />
            <img src="../../static/image/wixing.jpg" style="width: 100px ; height: 100px;"  @click="loginWithWeChat"/>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        phone:"",
        activeTab: 'phone',
        phoneForm: {
          phone:'',
          code:''
        },
        accountForm: {
          userPhone: '',
          userPass: ''
        },
        wechatAppId:"",
        wechatRedirectUri: "",
        user:{

        },
        rules: {
          phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
          ],
          code: [
            { required: true, message: '请输入验证码', trigger: 'blur' }
          ],
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
          ]
        },
        sendingCode: false
      };
    },
    methods: {
      show() {
        this.showQqLogin()
      },

      loginWithWeChat() {
      const url = `https://open.weixin.qq.com/connect/qrconnect?appid=${this.wechatAppId}&redirect_uri=${this.wechatRedirectUri}&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect`;
      window.location.href = url;
    },
      showQqLogin() {
          let wtop = (window.screen.height - 320) / 2;
          let wleft = (window.screen.width - 450) / 2;
          let qqWindow=window.open("https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101780702&redirect_uri=http://www.pawntest.com/qqlogin&state=test","TencentLogin",
             "top="+wtop+",left="+wleft+"?,width=450,height=320,menubar=0,scrollbars=1,resizable=1,status=1,titlebar=0,toolbar=0,location=1");
          window.addEventListener("message",e => {
              /*if(e.data != null && e.data != undefined && e.data != '' && e.data != 1) {
                  localStorage.setItem("woniu-book-usertoken",e.data);
                  setTimeout(() => {
                      qqWindow.close();
                      this.$router.push("/main");
                  }, 2000);
              } else if(e.data == 1) {
                  
              }*/
              let obj = JSON.parse(e.data);
              this.user=obj;
              console.log(obj);
              if(obj.state == 1) {
                  localStorage.setItem("movie-token",obj.token);
                  setTimeout(() => {
                    qqWindow.close();
                      this.$router.push("/main");
                  }, 1000);
              } else if(obj.state == 0) {
                location.reload(true)
                  alert("没有注册")
                  this.$router.push("/register");
              }
          })
            
        },



      handleTabClick(tab) {
        this.activeTab = tab.name;
      },
      sendCode() {
    this.$http.get("/login/login/sendRegisterCode",{params:{
      phone:this.phone

    }}).then(resp=>{
      console.log(this.phone);
      if(resp.data.code == 200) { 
        alert("验证码发送成功");
      }
    })
      },
      loginWithPhone() {
        this.phoneForm.phone=this.phone;
       this.$http.post("/login/login/selsetcode",this.phoneForm).then(resp=>{
        if(resp.data.code == 200) { 
          localStorage.setItem("movie-token",resp.data.data);
          this.$router.push("/main");
        }
       })
      },
      loginWithAccount() {
          this.$http.post("/login/login/login",this.accountForm).then(resp=>{
            if(resp.data.code == 200) {
              if(resp.data.code == 200) { 
          localStorage.setItem("movie-token",resp.data.data);
          this.$router.push("/main");
        }
             }

          })


        // this.$refs.accountForm.validate(valid => {
        //   if (valid) {
        //     this.$axios.post('/api/login-with-account', { username: this.accountForm.username, password: this.accountForm.password })
        //       .then(response => {
        //         this.$message.success('登录成功');
        //       })
        //       .catch(error => {
        //         this.$message.error('登录失败');
        //       });
        //   }
        // });
      },
      loginWithQQ() {
        window.location.href = 'https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&state=STATE';
      }
    }
  };
  </script>
  
  <style scoped>
  .login-container {
    
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f2f5;
  }
  
  .login-card {
    width: 400px;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  </style>